<template>
  <div class="user-container">
    <m-pull-refresh @refReshSend="refReshSend">
      <template v-slot>
        <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
          <div class="top-bg">
            <div>
              <img :src="userImg" alt="" />
            </div>
            <van-uploader :after-read="afterRead" />
            <p class="top-bg-p">敬请期待更多功能...</p>
            <!-- <van-popover
            class="head-pop"
            v-model:show="showPopover"
            teleport="#app"
            :actions="actions"
            @select="popSelect"
          >
        <template #reference>
          <p class="head-text">
            <b>En</b>
          </p>
        </template>
      </van-popover> -->
          </div>
          <p class="user-func-title">{{ i18n.$t('use') }}</p>
          <div class="user-func-list">
            <template v-for="item in userFuncList">
              <div :key="item.key" v-if="item.isShow" @click="goToItem(item.route)">
                <p>
                  <van-icon :name="item.icon" />
                  <span>{{ i18n.$t(item.text) }}</span>
                </p>
              </div>
            </template>
          </div>
        </van-list>
      </template>
    </m-pull-refresh>
    <van-popup position="top" v-model:show="concatActive" overlay-class="concat-pupop">
      <img class="concat-img" src="./../../assets/images/concat.jpg" />
    </van-popup>
    <!-- <van-popup position='bottom' v-model:show="concatActive" overlay-class='concat-pupop'>
      <img class='concat-img' src="./../../assets/images/concat.jpg" />
    </van-popup> -->
  </div>
  <m-footer :route="childRoute" ref="foot_bar"></m-footer>
</template>

<script lang="ts">
  import { useI18n } from '@/i18nPlugin'
  import { ref, toRefs, defineComponent, reactive, onMounted } from 'vue'

  //缓存
  import { useStore } from 'vuex'

  //本地数据
  import commonData from '@/data'

  //业务组件
  import { MFooter, MPullRefresh } from '@/components'

  //路由
  import { useRouter } from 'vue-router'
  //接口
  import { setUserImg, getUserData } from '@/serve/api'
  //图片
  import defaultImg from '@/assets/images/user_img.png'

  export default defineComponent({
    nem: 'User',
    components: {
      MFooter,
      MPullRefresh
    },
    setup: () => {
      // userFuncList
      const store = useStore() // 使用useStore方法
      const router = useRouter()
      const i18n = useI18n()
      const data = reactive({
        childRoute: 'user', //footer高亮状态
        loading: false,
        finished: false,
        actions: [{ text: '中文' }, { text: 'English' }],
        showPopover: ref(false),
        concatActive: false,
        userImg: defaultImg,
        userFuncList: [{}]
      })
      let popSelect = (item: any) => {
        const locale = item.text === '中文' ? 'en' : 'es'
        i18n.locale.value = locale
      }
      const onLoad = () => {
        data.loading = false
      }
      const afterRead = (file: any) => {
        ;(<any>window).utils.dealImage(file.content, 100, (base64: string) => {
          let req = {
            titleImg: base64,
            userCode: store.state.userData.userCode
          }
          setUserImg(req).then((res: any) => {
            console.log(res)
            if (res.data.resCode === 1000) {
              data.userImg = base64
            }
          })
        })
      }
      const goToItem = (item: string) => {
        if (item === 'wechart') {
          //联系开发
          data.concatActive = true
        } else if (item === 'goOut') {
          ;(<any>window).utils.ui.Toast('已退出登录！')
          let initUser = {
            key: 'userData',
            value: {
              titleImg: '',
              userCode: '',
              userName: ''
            }
          }
          store.commit('MUTATIONS_SET_STATE', initUser)
          store.dispatch('ACTIONS_CHANGE_FOOTER_BAR', false)
          data.userFuncList.forEach((item: any) => {
            if (item.route == 'goOut') {
              item.isShow = false
            }
            if (item.route == 'login') {
              item.isShow = true
            }
          })
          data.userImg = defaultImg
          // setTimeout(()=>{
          //   router.replace('/Login')
          // },1000)
        } else if (item === '/collect') {
          let obj = {
            key: 'collectBackType',
            value: '/User'
          }
          store.commit('MUTATIONS_SET_STATE', obj)
          router.replace(item)
        } else if (item === 'clear') {
          ;(<any>window).utils.ui.Toast('已清空您的阅读记录！')
          let newsDetails = {
            key: 'newsDetails',
            value: []
          }
          store.commit('MUTATIONS_SET_STATE', newsDetails)
          let newsList = {
            key: 'newsList',
            value: []
          }
          store.commit('MUTATIONS_SET_STATE', newsList)
        } else {
          router.replace(item)
        }
      }
      const getUserDataFunc = () => {
        if (store.state.userData.userCode) {
          let req = {
            userCode: store.state.userData.userCode
          }
          getUserData(req).then((res) => {
            // console.log(res)
            if (res.data.resCode === 1000) {
              data.userImg = res.data.resData.titleImg || defaultImg
            }
          })
        } else {
          data.userImg = defaultImg
        }
      }
      const refReshSend = () => {
        getUserDataFunc()
      }
      onMounted(() => {
        data.userFuncList = []
        console.log(commonData)
        let arr = commonData.userFuncList
        arr.forEach((item: any) => {
          item.isShow = true
          if (item.route == 'goOut') {
            item.isShow = store.state.userData.userCode != ''
          }
          if (item.route == 'login') {
            item.isShow = store.state.userData.userCode == ''
          }
        })
        data.userFuncList = arr
        console.log(JSON.parse(JSON.stringify(arr)))
        getUserDataFunc()
      })
      return {
        ...toRefs(data),
        i18n,
        onMounted,
        onLoad,
        goToItem,
        popSelect,
        afterRead,
        getUserDataFunc,
        refReshSend
      }
    }
  })
</script>

<style scoped lang="scss">
  .user-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background: url('./../../assets/images/user_bg.png') no-repeat;
    // opacity: 0.1;
    // filter:alpha(opacity=50)!important;
    // opacity:0.95;
    // background-size: 100% 100%;

    :deep(.van-pull-refresh__track) {
      height: 100vh;
      background: #f3f3f3;
      padding-top: 20px;
    }
    .top-bg {
      // background: url('./../../assets/images/user_bg.png') no-repeat;
      // background-size: 100% 100%;
      width: 95%;
      margin: 0 auto 20px auto;
      height: 240px;
      display: flex;
      background: #fff;
      align-items: center;
      justify-content: space-between;
      padding: 0 5%;
      position: relative;
      .top-bg-p {
        color: #333;
        font-size: 24px;
      }
      img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
      }
      .head-text {
        color: $theme-active;
      }
      .van-uploader {
        position: absolute;
        left: 15%;
        z-index: 100;
        :deep(.van-uploader__upload) {
          width: 150px;
          height: 150px;
          opacity: 0;
        }
      }
    }
    .user-func-title {
      background: #fff;
      margin: 0 2.5%;
      font-size: 30px;
      padding: 30px;
    }
    .user-func-list {
      background: #fff;
      width: 95%;
      margin: 0 auto 20px auto;
      position: relative;
      z-index: 10;
      display: flex;
      flex-wrap: wrap;
      div {
        width: 33%;
        text-align: center;
        height: 120px;
        display: flex;
        align-items: center;
        // line-height: 80px;
        font-size: 24px;
        padding: 0 5%;
        color: #333;
        // border-bottom: 1px solid #ccc;
        // color: $theme;
        // font-weight: bold;
        p {
          width: 100%;
          i {
            color: #333;
            // font-weight: bold;
            // margin-right: 8px;
            font-size: 30px;
          }
          span {
            display: block;
            margin-top: 5px;
            font-size: 24px;
          }
        }
      }
    }
  }
  .concat-img {
    width: 80%;
  }
  :deep(.van-popup--top) {
    width: 100%;
    text-align: center;
    background: transparent;
  }
</style>
